<template>
	<view class="container doctor-container">
		<view class="top">
			<view class="doctor-info-box">
				<image class="avater" :src="info.headPortrait"></image>
				<view class="info-box">
					<text class="doctor-name">{{info.name}}</text>
					<view class="job-box">
						<text>{{info.job}}</text>
						<text>{{getKSname(info)}}</text>
					</view>
					<view class="belone">
						<!-- <view class="tag">公立医院</view> -->
						<view class="belone" @click="jumpPlace()">
							<text>{{info.placeOrganizationName}}</text>
							<view class="iconfont" style="font-size: 24rpx;color: #299F91;">&#xe775;</view>
						</view>
					</view>
				</view>
			</view>
			<view class="text-box">
				<view class="text">
					<view class="title">专业擅长</view>
					<view>{{info.adeptIllness}}</view>
				</view>
				<view class="text">
					<view class="title">个人简介</view>
					<view v-html="info.synopsis">{{info.synopsis}}</view>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="title">健康咨询</view>
			<view class="tags">
				<view class="tag">经验丰富</view>
				<view class="tag">接症速度快</view>
				<view class="tag">好评率高</view>
			</view>
			<view class="cube-box">
				<view class="cube" @click="asking">
					<view class="iconfont" style="color:#36ab60;background-color: rgba(54, 171, 96, .3);">&#xe61e;
					</view>
					<view>立即咨询</view>
					<view class="price">
						￥
						<span style="font-size: 34rpx;">{{info.consultCost}}</span>
						/次
					</view>
				</view>
				<view class="cube" @click="toAsking">
					<view class="iconfont" style="color: #1296db;background-color: rgba(18, 150, 219, .3)">&#xe620;
					</view>
					<view>到店咨询</view>
					<view class="asking">点击预约</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue"
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		jump
	} from "../../../untils/tools"
	import {
		hideLoading,
		showLoading,
		showToast,
		utilLogin
	} from "../../../common/util"
	import api from "@/common/api.ts"

	let info = ref({})
	let asking = async () => {
		if (!utilLogin()) return
		let params = {
			storeId: info.value.placeStoreId,
			doctorId: info.value.id,
			paymentPrice: info.value.consultCost * 100
		}
		showLoading()
		const res = await api.paymentRequest(params)
		const payData = res.data
		console.log(res);
		wx.requestPayment({
			timeStamp: payData.timeStamp + '',
			nonceStr: payData.nonceStr,
			package: payData.package,
			signType: 'RSA',
			paySign: payData.paySign,
			success(res) {
				hideLoading()
				uni.showToast({
					title: '支付成功',
					icon: 'success'
				})
				setTimeout(() => {
					jump(
						`/pages/index/clinic/asking?name=${info.value.name}&doctorFirmQrCode=${info.value.doctorFirmQrCode}&clinicName=${info.value.placeOrganizationName}&avater=${info.value.headPortrait}`
					)
				}, 1500)

			},
			fail(err) {
				console.info(err)
				hideLoading()
				if (err.errMsg == 'requestPayment:fail cancel') {
					uni.showToast({
						title: '取消支付',
						icon: 'error'
					})
				} else {
					uni.showToast({
						title: '支付失败',
						icon: 'error'
					})
				}

			}
		})


		// wx.requestPayment({
		//         appid: "wx71a71516ac7e99d2",  // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
		//         noncestr: "c5sEwbaNPiXAF3iv", // 随机字符串
		//         package: "Sign=WXPay",        // 固定值
		//         partnerid: "1481252152",      // 微信支付商户号
		//         prepayid: "wx202254da2521a2be90000", // 统一下单订单号
		//         timestamp: "1597935292",        // 时间戳（单位：秒）
		//         sign: "A842B45937F6EFF60DEC7A2EAA52D5A0" ,// 签名，这里用的 MD5/RSA 签名
		// 		success: (res) => {
		// 			console.log('唤起微信支付',res);
		// 			if(res){
		// 				uni.showToast({
		// 					title:'支付成功',
		// 					icon:'success'
		// 				})
		// 				setTimeout(()=>{
		// 					jump(`/pages/index/clinic/asking?name=${info.value.name}&doctorFirmQrCode=${info.value.doctorFirmQrCode}&clinicName=${info.value.placeOrganizationName}&avater=${info.value.headPortrait}`)
		// 				},1500)
		// 			}
		// 		},
		// 		fail: (err) => {
		// 			if(err.errMsg == 'requestPayment:fail cancel'){
		// 				uni.showToast({
		// 					title:'取消支付',
		// 					icon:'error'
		// 				})
		// 			}else{
		// 				uni.showToast({
		// 					title:'支付失败',
		// 					icon:'error'
		// 				})
		// 			}
		// 			console.log(err);
		// 		}
		//     })

	}
	let toAsking = () => {
		if (!utilLogin()) return
		jump("/pages/index/clinic/toAsking?placeStoreId=" + info.value.placeStoreId)
	}

	onLoad(async (option) => {
		console.info(444)
		await getDepart()
		getDoctorInfo(option.id)
	})

	let getDoctorInfo = async (doctorId) => {
		showLoading()
		const res = await api.getDoctorInfo({
			id: doctorId
		})
		hideLoading()
		info.value = res?.data
		info.value.adeptIllness = (info.value.adeptIllnessJson.map(item => {
			return item.name
		})).join('')
	}

	let departList = [];
	const getDepart = async () => {
		showLoading()
		try {
			const res = await api.getBaseInfo('KS');
			departList = res.data;
		} finally {
			hideLoading()
		}
	}

	const getKSname=(item)=> {
		const parent = departList.find((depart) => {
			return depart.id === Number(item.stairOfficesDirector);
		});
		if (parent) {
			if (item.twoOfficesDirector) {
				const child = parent.children.find((child) => {
					return child.id === Number(item.twoOfficesDirector);
				});
				return parent.name + "/" + (child?.name || '');
			} else {
				return parent.name;
			}
		}
		return "";
	}
	const jumpPlace=()=>{
		jump("/pages/index/clinic/clinicDetail?id="+info.value.placeStoreId+"&name="+info.value.placeOrganizationName)
	}
</script>

<style lang="scss">
	.doctor-container {
		padding: 20rpx;
		background: linear-gradient(180deg, #DBFFFB 3%, #D9EFFD 11%, #D7E5FF 22%, #F5F6FA 25%);

		.top {
			border-radius: 12rpx;
			box-shadow: 0 0 2rpx 2rpx #e9eaec;
			padding: 20rpx;
			background-color: #FFFFFF;
			position: relative;
			margin-bottom: 20rpx;

			&::after {
				content: '执业资质';
				position: absolute;
				top: 0;
				right: 0;
				width: 134rpx;
				line-height: 40rpx;
				background-color: rgba(253, 211, 60, .2);
				color: #AC8E23;
				text-align: center;
				font-size: 24rpx;
				border-radius: 8rpx;
			}

			.doctor-info-box {
				display: flex;
				align-items: center;

				.avater {
					border-radius: 50%;
					border: 1rpx solid #65f3cb;
					width: 148rpx;
					height: 148rpx;
					margin-right: 40rpx;
				}

				.info-box {
					font-size: 24rpx;

					.doctor-name {
						display: inline-block;
						font-weight: 600;
						font-size: 32rpx;
						color: #202020;
						font-style: normal;
					}

					.job-box {
						margin: 20rpx 0;
						font-weight: 600;

						text:nth-child(1) {
							margin-right: 10rpx;
						}
					}

					.belone {
						display: flex;
						align-items: center;

						.tag {
							padding: 3rpx 10rpx;
							background-color: rgba(58, 211, 193, 0.20);
							color: #1FBDAB;
							border-radius: 8rpx;
							margin-right: 20rpx;
						}
					}
				}
			}

			.text-box {
				margin-top: 50rpx;
				font-size: 24rpx;

				.text {
					margin-bottom: 20rpx;

					.title {
						font-weight: 600;
						margin: 10rpx 0;
					}

					view:nth-child(2) {
						color: #6D6D6D;
					}
				}
			}
		}

		.bottom {
			border-radius: 12rpx;
			box-shadow: 0 0 2rpx 2rpx #e9eaec;
			padding: 20rpx;
			background-color: #FFFFFF;
			position: relative;

			.title {
				font-weight: 600;
			}

			.tags {
				font-size: 29rpx;
				font-weight: 600;
				margin: 20rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #3AD3C1;
			}

			.cube-box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 24rpx;

				.cube {
					text-align: center;
					padding: 60rpx 80rpx;
					background-color: #F5F6FA;
					border-radius: 12rpx;

					.iconfont {
						display: inline-block;
						font-size: 36rpx;
						border-radius: 50%;
						padding: 15rpx;
					}

					view:nth-child(2) {
						margin: 20rpx 0;
						font-weight: 600;
					}

					.price {
						color: #FF615A;
						width: 170rpx;
						font-weight: bold;
					}

					.asking {
						color: #299F91;
						width: 170rpx;
						font-weight: 600;
						font-size: 24rpx;
					}
				}
			}
		}
	}
</style>